<template>
  <div class="tuijian">
    <h6><img src="../../../assets/img/yl-img/zx/zx_111.jpg" />{{ reco }}</h6>
    <ul class="zunxiang">
      <li v-for="recommends in gettypeval" :key="recommends.id">
        <img :src="recommends.img" />
        <p>{{ recommends.name }}</p>
        <span>{{ recommends.author }}</span>
      </li>

      <h5><span>查看更多</span> <span>换一换</span></h5>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Tuijian",
  props: ["reco","type"],
  data() {
    return {
      recommend: [],
      kv: {
        "今日推荐": "tuijian",
        "动作片": "dongzuo",
      },
      gettypeval:[]
    };
  },
  methods: {
    gettype(val){
      val.forEach(x => {
        if(x.type == this.type){
          this.gettypeval.push(x);
        }
      });
      console.log(this.gettypeval)
    }
  },
  created() {
    axios({
      url: "/recommend",
      params: {
        type: this.kv[this.reco],
      },
    }).then((res) => {
      this.recommend = res.data;
      this.gettype(this.recommend);
      });
  },
};
</script>

<style scoped>
/* <!-- 今日推荐 --> */
.tuijian {
  margin-left: 0.15rem;
}
.zunxiang {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.12rem;
}
.zunxiang li {
  width: 33%;
  margin-bottom: 0.2rem;
  color: white;
}
h6 {
  font-size: 0.17rem;
  padding-top: 0.3rem;
  width: 100%;
  height: 0.18rem;
  color: black;
  /* background-color: royalblue; */
}
.zunxiang img {
  width: 1.25rem;
  height: 1.65rem;
  display: block;
}
.zunxiang li p {
  font-size: 0.14rem;
  margin-top: 0.1rem;
  margin-bottom: 0.08rem;
  color: black;
}
.zunxiang li span {
  color: #828288;
  font-size: 0.12rem;
}
h5 {
  font-weight: normal;
  height: 0.44rem;
  width: 100%;
  margin-top: 0.06rem;
}
h5 span {
  width: 1.9rem;
  display: inline-block;
  background-color: #f7f5f6;
  line-height: 0.44rem;
  text-align: center;
  color: #a6a6a6;
  border-radius: 0.05rem;
}
h5 span:first-child {
  float: left;
  margin-right: 0.1rem;
  height: 100%;
}
</style>